<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        // ctx.globalCompositeOperation = 'source-in';
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 100, 100);

        
        /*
            source-over	默认。在目标图像上显示源图像。
            source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
            source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
            source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
            destination-over	在源图像上方显示目标图像。
            destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
            destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
            destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
            lighter	显示源图像 + 目标图像。
            copy	显示源图像。忽略目标图像。
            xor	使用异或操作对源图像与目标图像进行组合。
        */
       // 因为重叠部分是第二个正方形绘制的时候才会产生，所以要写在第二个矩形绘画之前、第一个矩形绘画之后
        ctx.globalCompositeOperation = 'source-in';
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 50, 100, 100);
    </script>
</body>

</html>